<template>
    <div>
        <el-table ref="SendPoliceTableRef" v-loading="loading" :data="SendPoliceTable"
            @selectionChange="selectChangeHandle"
            @row-dblclick="handleRowDblClick"
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip v-model="isShow" border>
            <el-table-column label="调警单位" prop="order_unit_name" />
            <el-table-column label="被调单位" prop="from_unit_name" />
            <el-table-column label="调往单位" prop="to_unit_name" />

            <el-table-column label="男" prop="userman" />
            <el-table-column label="女" prop="userwoman" />
            <el-table-column label="集合时间" prop="userdate" width="160" />
            <el-table-column label="集合地点" prop="useraddress" width="120" />

            <el-table-column label="状态" prop="state">
                <template #default="scope">
                    <dict-tag :options="nj_orderpolice_status" :value="scope.row.state" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="140" align="center">
                <template #default="scope">
                    <el-button v-if="scope.row.state == 0 || scope.row.state == 2" link size="small" type="primary"
                        @click="AddEditOrderPoliceRef.showEditOrderPolice(scope.row, '法警负责人审批', 'fajingApprove', '2')">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        审批
                    </el-button>
                    <el-button link size="small" type="primary"
                        @click="AddEditOrderPoliceRef.showEditOrderPolice(scope.row, '查看调警令信息', 'View',)">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum" :total="total"
            @pagination="getOrderPoliceLists" />
        <AddEditOrderPolice ref="AddEditOrderPoliceRef" @getOrderPoliceList="getOrderPoliceLists" />
    </div>
</template>
<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import { ElMessageBox } from 'element-plus'

import AddEditOrderPolice from "@/components/AddEditOrderPolice/AddEditOrderPolice.vue";

import { OrderPoliceDepList, } from "@/api/OrderPolice/OrderPolice";
import { getCurrentInstance } from "vue";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const { nj_sendpolice_type, nj_orderpolice_status, nj_anjian_type } = proxy.useDict('nj_sendpolice_type', 'nj_orderpolice_status', 'nj_anjian_type')

const isShow = ref(false)
const queryParamsRef = ref()
const deleteStatus = ref(true)
const AddEditOrderPoliceRef = ref({})
const loading = ref(false)

const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const queryParams = ref({
    state: null
})

const total = ref(0)
const SendPoliceTable = ref([])

const emit = defineEmits(["backtotal"]);

onMounted(() => {

})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const showOrderPoliceApply = (Params) => {
    console.log("show调警令", Params)
    queryParams.value = {
        ...queryParams.value,
        params: Params.params,
        orderUnitId: Params.orderUnitId,
        fromUnitId: Params.fromUnitId,
        toUnitId: Params.toUnitId,
    }
    if (Params.state == null) {
        queryParams.value.state = '0,2'
    } else if (Params.state == '99') {
        queryParams.value.state = null
    } else {
        queryParams.value.state = Params.state
    }
    changeShowStatus()
    getOrderPoliceLists()

}
// 获取法警负责人审批 调警令列表
const getOrderPoliceLists = async () => {
    loading.value = true
    await OrderPoliceDepList(queryParams.value, paging.value).then(res => {
        SendPoliceTable.value = res.rows
        total.value = res.total
        loading.value = false
        setTimeout(() => {
            emit("backtotal", res.total);
        }, 100);
    })
}

const selectChangeHandle = (data) => {
    deleteStatus.value = data.length === 0;
}
const handleRowDblClick = (row) => {
    AddEditOrderPoliceRef.value.showEditOrderPolice(row, '查看调警令信息', 'View',)
}

defineExpose({ showOrderPoliceApply })
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>